<!DOCTYPE html>
<html lang="zh" xml:lang="zh">
<head>
    <meta charset='utf-8'/>
    <title>Map-Navigator</title>
    <script src="../../ref/jquery-3.2.1.min.js"></script>
    <style type="text/css">
        * {
            font-family: "微软雅黑";
            margin: 0px;
            padding: 0px;
        }

        #toolbar {
            background-color: #FFFFFF;
            width: 100%;
            height: 160px;
            position: fixed;
            left: 0px;
            top: 0px;
        }

        #body {
            background-color: #EEEEEE;
            width: 100%;
            height: 800px;
            margin-top: 160px;
        }

        #table {
            line-height: 40px;
            width: 100%;
            text-align: center;
            border-bottom: 0.5px solid #94e0b4;
        }

        #table tr td {
            border-right: 0.5px solid #94e0b4;
            width: 11.1%;
            height: 40px;

        }

        .tablem_tr {
            background-color: #2dcc70;
            color: white;
            font-size: 20px;
            height: 50px;
        }

        .tablem_style1 {
            background-color: #e0f3e8;
        }

        .tablem_style2 {
            background-color: #cff1dd;
        }

        .tablem_style1:hover, .tablem_style2:hover {
            background-color: #6ade9b;
        }

        #updataTime, #toolbarm_title {
            text-align: bottom;
            line-height: 70px;
            position: relative;
        }

        #updataTime {
            width: 30%;
            font-size: 15px;
        }

        #toolbarm_title {
            width: 100%;
            font-size: 24px;
            margin-left: 30%;
        }

        hr {
            margin: -10px 20px 0px 20px;
            border-color: #2dcc70;
            border-width: 0.5px;
        }

        .toolbarm_button {
            height: 44px;
            width: 44px;
            border-radius: 22px;
            background-color: #2dcc70;
            display: inline-block;
            margin-top: 8px;
            margin-left: 10px;
        }

        .toolbarm_button2 {
            height: 40px;
            width: 40px;
            border-radius: 20px;
            background-color: white;
            margin: 4px;
            text-align: center;
            cursor: pointer;
            color: #555555;
        }

        .toolbarm_button2:hover {
            background-color: #2dcc70;
            color: red;
        }

        .toolbarm_button2 span {
            margin-top: 20px;
            line-height: 40px;
            font-size: 13px;
        }

        a:visited, a:link {
            color: black;
            text-decoration: none;
        }

        a:hover {
            color: #0000FF;
            text-decoration: underline;
        }

        .selDateTime {
            width: 100%;
            margin-left: 40%;
            line-height: 30px;
        }

        .input {
            width: 135px;
        }

        .label, .input {
            margin-top: 5px;
        }
    </style>
</head>
<body>
<div id="toolbar">
    <span id="toolbarm_title">监测站空气质量排行</span>
    <hr></hr>

    <div class="selDateTime">
        <span class="label">日期和时间:</span>
        <input type="text" class="input" id="dataTime" placeholder="2017-01-01 00:00:00">

    </div>

    <div class="toolbarm_button">
        <div id="m_bt1" class="toolbarm_button2"><span>AQI</span></div>
    </div>

    <div class="toolbarm_button">
        <div id="m_bt2" class="toolbarm_button2"><span>PM2.5</span></div>
    </div>

    <div class="toolbarm_button">
        <div id="m_bt3" class="toolbarm_button2"><span>PM10</span></div>
    </div>

    <div class="toolbarm_button">
        <div id="m_bt4" class="toolbarm_button2"><span>SO2</span></div>
    </div>

    <div class="toolbarm_button">
        <div id="m_bt5" class="toolbarm_button2"><span>NO2</span></div>
    </div>

    <div class="toolbarm_button">
        <div id="m_bt6" class="toolbarm_button2"><span>CO</span></div>
    </div>

    <div class="toolbarm_button">
        <div id="m_bt7" class="toolbarm_button2"><span>O3</span></div>
    </div>
</div>
<div id="body">
    <table id="table" cellspacing="0">
        <tr class="tablem_tr">
            <td>序号</td>
            <td>站点</td>
            <td>AQI</td>
            <td>PM2.5</td>
            <td>PM10</td>
            <td>SO2</td>
            <td>NO2</td>
            <td>CO</td>
            <td>O3</td>
        </tr>
        <tbody id="data">
    </table>
</div>
<script src="../../ref/laydate/laydate.js" charset="utf-8"></script>
<script type="text/javascript">
    function getNowFormatDate() {
        var date = new Date();
        var seperator1 = "-";
        var year = date.getFullYear();
        var month = date.getMonth() + 1;
        var strDate = date.getDate();
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (strDate >= 0 && strDate <= 9) {
            strDate = "0" + strDate;
        }
        var currentdate = year + seperator1 + month + seperator1 + strDate;
        return currentdate;
    }
    var TimeDefault = getBeforeDate(1);
/*    var TimeDone = '2017-01-30';*/

    var TimeDone =  TimeDefault
    laydate.render({
        elem: '#dataTime'
        , type: 'datetime',
        done: function (value, date, endDate) {

            getTimeBegin(value);
        }
    });

    function getTimeBegin(value) {

        TimeDone = value;
        ajax(TimeDone);
    }

    var bt = [];
    for (var i = 1; i < 8; i++) {
        bt[i - 1] = document.getElementById('m_bt' + i);
    }
    var writed = false;

    //获取当前时间
    function getBeforeDate(n) {
        var n = n;
        var d = new Date();
        var year = d.getFullYear();
        var mon = d.getMonth() + 1;
        var day = d.getDate();
        if (day <= n) {
            if (mon > 1) {
                mon = mon - 1;
            }
            else {
                year = year - 1;
                mon = 12;
            }
        }
        d.setDate(d.getDate() - n);
        year = d.getFullYear();
        mon = d.getMonth() + 1;
        day = d.getDate();
        s = year + "-" + (mon < 10 ? ('0' + mon) : mon) + "-" + (day < 10 ? ('0' + day) : day);
        return s;
    }





    $("#dataTime").attr("placeholder", TimeDefault);
    ajax(TimeDone);


    function ajax(TimeDone) {

        var timenow = getNowFormatDate();
        TimeDone = TimeDone || timenow;

        if (TimeDone) {



            $.get('/hbtserver/aqi/city/day?day=' + TimeDone + '', function (rt, st) {
                var dataShi = rt;
                var getalldata = toobarEvent.GetAllData(dataShi);

                toobarEvent.setselect(bt[0]);
                toobarEvent.init(getalldata, 1);
                for (var i = 0; i < 7; i++) {
                    toobarEvent.clickSelect(getalldata, bt[i], i + 1);


                }

            });
        }

        if (window.parent.showmaps != undefined) {
            window.parent.showmaps(TimeDone);
        }
    }


    var toobarEvent = {
        setselect: function (a) {
            for (var i = 7; i > 0; i--) {
                var m_bt = document.getElementById('m_bt' + i);
                if (m_bt === a) {
                    m_bt.style.backgroundColor = "#2dcc70";
                    m_bt.style.color = "white";
                }
                else {
                    m_bt.style.backgroundColor = "white";
                    m_bt.style.color = "#555555";
                }
            }
        },
        clickSelect: function (getalldata, btn, flag) {
            btn.onclick = function () {
                toobarEvent.setselect(btn);
                toobarEvent.init(getalldata, flag);
            }
        },
        zero: function (t) {
            var A = [];
            var i = t;
            while (i > 0) {
                A.push(0);
                i--;
            }
            return A;
        },
        GetAllData: function (dataShi) {
            var shim_js = dataShi,
                m_name = [],
                m_aqi = [],
                m_pm25 = [],
                m_pm10 = [],
                m_so2 = [],
                m_no2 = [],
                m_co = [],
                m_o3 = [],
                i,
                length = shim_js.length || 0;
            for (i = 0; i < length; i++) {
                m_name.push(shim_js[i].name.substring(0, shim_js[i].name.length - 1));
                m_aqi.push(shim_js[i].aqi);
                m_pm25.push(shim_js[i].pm25);
                m_pm10.push(shim_js[i].pm10);
                m_so2.push(shim_js[i].so2);
                m_no2.push(shim_js[i].no2);
                m_co.push(shim_js[i].co);
                m_o3.push(shim_js[i].o3);
            }
            return [m_name, m_aqi, m_pm25, m_pm10, m_so2, m_no2, m_co, m_o3];
        },
        init: function (getalldata, t) {
            if (writed) {
                $("#data").empty();
                writed = false;
            }

            var m_name = getalldata[0];
            var m_rankdata = getalldata[t];

            //rank
            var rank = toobarEvent.rank(m_rankdata);

            var m_length = m_name.length || 0;
            for (var i = 0; i < m_length; i++) {
                var m_f = rank[i];
                if (i % 2 === 0) {
                    $("#data").append(
                        '<tr class="tablem_style1">' +
                        '<td>' + (i + 1) + '</td>' +
                        '<td ><a href=Frame.html?code=' + m_f + '>' + m_name[m_f] + '</a></td>' +
                        '<td >' + getalldata[1][m_f] + '</td>' +
                        '<td >' + getalldata[2][m_f] + '</td>' +
                        '<td >' + getalldata[3][m_f] + '</td>' +
                        '<td >' + getalldata[4][m_f] + '</td>' +
                        '<td >' + getalldata[5][m_f] + '</td>' +
                        '<td >' + getalldata[6][m_f].toFixed(2) + '</td>' +
                        '<td >' + getalldata[7][m_f] + '</td>' +
                        '</tr>'
                    );
                }
                else {
                    $("#data").append(
                        '<tr class="tablem_style2">' +
                        '<td>' + (i + 1) + '</td>' +
                        '<td ><a href=Frame.html?code=' + m_f + '>' + m_name[m_f] + '</a></td>' +
                        '<td >' + getalldata[1][m_f] + '</td>' +
                        '<td >' + getalldata[2][m_f] + '</td>' +
                        '<td >' + getalldata[3][m_f] + '</td>' +
                        '<td >' + getalldata[4][m_f] + '</td>' +
                        '<td >' + getalldata[5][m_f] + '</td>' +
                        '<td >' + getalldata[6][m_f].toFixed(2) + '</td>' +
                        '<td >' + getalldata[7][m_f] + '</td>' +
                        '</tr>'
                    );
                }
            }

            writed = true;
        },
        rank: function (m_d) {
            var rank = [],
                len = m_d.length,
                comp = toobarEvent.zero(len),
                m_max,
                m;

            for (var i = 0; i < len; i++) {
                for (m = 0; m < len; m++)
                    if (comp[m] == 0) {
                        m_max = m_d[m];
                        break;
                    }
                var flag = 0.000001;
                for (var j = 0; j < len; j++)
                    if (m_d[j] > m_max && comp[j] === 0) {
                        m_max = m_d[j];
                        flag = j;
                    }

                if (flag != 0.000001) {
                    rank.push(flag);
                    comp[flag] = 1;
                }
                else {
                    rank.push(m);
                    comp[m] = 1;
                }
            }
            return rank;
        }
    }
</script>
</body>
</html>
		